<template>
    <div class="calculus-box" ref="dom">
        <img :src="require('./asset/background.png')" alt="" />

        <div class="elevation-top">
            滩顶
            <span> {{ data.elevation }}(m) </span>
        </div>

        <div class="safeHeight-big">
            最小安全超高
            <span>{{ data.safeHeight }}(m)</span>
        </div>

        <div class="beachLength-big">
            最小干滩长度
            <span>{{ data.beachLength }}(m)</span>
        </div>

        <div class="capacity-big">
            调洪库容
            <span>{{ data.capacity }}(m³)</span>
        </div>

        <div class="waterMark-big">
            最高洪水位
            <span>{{ data.waterMark }}(m)</span>
        </div>

        <div class="normalWaterLevel-big">
            正常运行水位
            <span>{{ data.normalWaterLevel }}(m)</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "Calculus",
    props: {
        data: {
            type: Object,
            default() {
                return {};
            },
        },
    },
    mounted() {
        this.handlerResize = debounce(this.handlerResize, 300);
        window.addEventListener("resize", this.handlerResize);
        this.handlerResize();
    },
    beforeDestroy() {
        window.removeEventListener("resize", this.handlerResize);
    },
    methods: {
        handlerResize() {
            console.log(this.$refs.dom.clientWidth);
            this.$refs.dom.style = `font-size:${this.$refs.dom.clientWidth / 170}px;`;
        },
    },
};
function debounce(fn, delay) {
    let timerId;
    return function(...args) {
        if (timerId) {
            clearTimeout(timerId);
        }
        timerId = setTimeout(() => {
            fn(...args);
            timerId = null;
        }, delay);
    };
}
</script>

<style lang="scss" scoped>
.calculus-box {
    position: relative;
    width: 80%;
    text-align: center;
    font-size: 8px;
    margin: 0 auto;
    div {
        font-size: 2.6em;
    }
    span {
        font-size: 1.3em;
        color: #111;
    }

    img {
        display: inline-block;
        width: 100%;
        z-index: 0;
    }

    /* 滩顶 */
    .elevation-top {
        position: absolute;
        top: 19.2%;
        right: 73%;
    }

    /* 最小安全超高 */
    .safeHeight-big {
        position: absolute;
        top: 36.4%;
        right: 76.5%;
    }

    /* 最小干滩长度 */
    .beachLength-big {
        position: absolute;
        top: 5.8%;
        left: 32%;
        width: 11%;
    }

    /* 调洪库容 */
    .capacity-big {
        position: absolute;
        top: 28.5%;
        right: 31.8%;
    }

    /* 最高洪水位 */
    .waterMark-big {
        position: absolute;
        top: 33%;
        right: 6%;
    }

    /* 正常运行水位 */
    .normalWaterLevel-big {
        position: absolute;
        top: 45%;
        left: 89%;
        width: 11%;
        height: 52px;
    }
}
</style>
